<div id="content-area" class="uuid-001">
    {$pagehtml}
</div>

<!--样式面板-->
<div panel-type="style" class="editor-container">
    <!--包含类 editable -->
    <div class="close btn">X</div>
    <label class="title">样式属性</label>
    <div class="chunk">
        <div><span>设置链接</span><input e-type="e-link" class="w-long" type="text"></div>
    </div>
    <div class="chunk" >
        <div><span>宽度%: </span><input data-type="text-num" e-type="e-width-p" type="text"></div>

        <div><span>宽度px: </span><input data-type="text-num" e-type="e-width" type="text"></div>

        <p>注意：根据最后变更的类型，判定百分比还是绝对值</p>
    </div>
    <div class="chunk" >
        <div><span>高度%: </span><input data-type="text-num" e-type="e-height-p" type="text"></div>

        <div><span>高度px: </span><input data-type="text-num" e-type="e-height" type="text"></div>

        <p>注意：根据最后变更的类型，判定百分比还是绝对值</p>

    </div>
    <div class="chunk" >
        <div>
            <span>水平居中</span><input data-type="checkbox" type="checkbox" e-type="e-h-center">
            <span>垂直居中</span><input data-type="checkbox" type="checkbox" e-type="e-v-center">
        </div>
    </div>
    <div class="chunk" >
        <p>位置</p>
        <div>
            <span>上px</span><input data-type="text-num" type="text" e-type="e-top">
            <span>上%</span><input data-type="text-num" type="text" e-type="e-top-p">
        </div>

        <div>
            <span>右px</span><input data-type="text-num" type="text" e-type="e-right">
            <span>右%</span><input data-type="text-num" type="text" e-type="e-right-p">
        </div>

        <div>
            <span>下px</span><input data-type="text-num" type="text" e-type="e-bottom">
            <span>下%</span><input data-type="text-num" type="text" e-type="e-bottom-p">
        </div>

        <div>
            <span>左px</span><input data-type="text-num" type="text" e-type="e-left">
            <span>左%</span><input data-type="text-num" type="text" e-type="e-left-p">
        </div>
        <p>注意：根据最后变更的类型，判定百分比还是绝对值</p>
    </div>
    <div class="chunk" >
        <div>
            <span>背景图</span><input type="file" data-type="file-img-bg" class="file" e-type="e-img-bg"><img style="width:50px;" src=""/>
        </div>
        <div>
            <span>背景排布</span>
            <select e-type="e-bg-repeat">
                <option data-option="no-repeat" selected="selected">no-repeat</option>
                <option data-option="repeat">repeat</option>
                <option data-option="repeat-x">repeat-x</option>
                <option data-option="repeat-y">repeat-y</option>
            </select>
        </div>
        <div>
            <span>背景适配</span>
            <select e-type="e-bg-size">
                <option data-option="auto" selected="selected">auto</option>
                <option data-option="cover">cover</option>
                <option data-option="contain">contain</option>
                <option data-option="100% 100%">100%</option>
            </select>
        </div>
    </div>
    <div class="chunk" >
        <div>内容色
            <input type="color" data-type="color" e-type="e-color">
            <span>r</span><input data-type="text-num" type="text" e-type="e-color-r">
            <span>g</span><input data-type="text-num" type="text" e-type="e-color-g">
            <span>b</span><input data-type="text-num" type="text" e-type="e-color-b">
            <span>a</span><input data-type="text-num" type="text" e-type="e-color-a">
        </div>

        <div>背景色
            <input type="color" data-type="color-bg" e-type="e-color-bg">
            <span>r</span><input data-type="text-num" type="text" e-type="e-color-bg-r">
            <span>g</span><input data-type="text-num" type="text" e-type="e-color-bg-g">
            <span>b</span><input data-type="text-num" type="text" e-type="e-color-bg-b">
            <span>a</span><input data-type="text-num" type="text" e-type="e-color-bg-a">
        </div>

    </div>
    <div class="chunk" >
        <div>
            <span>行高px</span><input data-type="text-num" type="text" e-type="e-line-height">
            <span>行高%</span><input data-type="text-num" type="text" e-type="e-line-height-p">
        </div>
        <div>
            <span>字号px</span><input data-type="text-num" type="text" e-type="e-font-size">
        </div>
    </div>
    <div class="chunk" >
        <p>外边距</p>

        <div>
            <span>上px</span><input data-type="text-num" type="text" e-type="e-margin-top">
            <span>上%</span><input data-type="text-num" type="text" e-type="e-margin-top-p">
        </div>
        <div>
            <span>右px</span><input data-type="text-num" type="text" e-type="e-margin-right">
            <span>右%</span><input data-type="text-num" type="text" e-type="e-margin-right-p">
        </div>
        <div>
            <span>下px</span><input data-type="text-num" type="text" e-type="e-margin-bottom">
            <span>下%</span><input data-type="text-num" type="text" e-type="e-margin-bottom-p">
        </div>
        <div>
            <span>左px</span><input data-type="text-num" type="text" e-type="e-margin-left">
            <span>左%</span><input data-type="text-num" type="text" e-type="e-margin-left-p">
        </div>

        <p>注意：根据最后变更的类型，判定百分比还是绝对值</p>
    </div>
    <div class="chunk" >
        <p>内边距</p>

        <div>
            <span>上px</span><input data-type="text-num" type="text" e-type="e-padding-top">
            <span>上%</span><input data-type="text-num" type="text" e-type="e-padding-top-p">
        </div>
        <div>
            <span>右px</span><input data-type="text-num" type="text" e-type="e-padding-right">
            <span>右%</span><input data-type="text-num" type="text" e-type="e-padding-right-p">
        </div>
        <div>
            <span>下px</span><input data-type="text-num" type="text" e-type="e-padding-bottom">
            <span>下%</span><input data-type="text-num" type="text" e-type="e-padding-bottom-p">
        </div>
        <div>
            <span>左px</span><input data-type="text-num" type="text" e-type="e-padding-left">
            <span>左%</span><input data-type="text-num" type="text" e-type="e-padding-left-p">
        </div>
        <p>注意：根据最后变更的类型，判定百分比还是绝对值</p>
    </div>
    <div class="chunk" >
        <p>边框</p>
        <div>
            <span>边框-风格:</span>
            <select data-type="select" e-type="e-border-style">
                <option data-border-style="none" selected="selected">无</option>
                <option data-border-style="solid">实线</option>
                <option data-border-style="dashed">虚线</option>
            </select>
        </div>
        <div>
            <span>边框-颜色:</span>
            <input data-type="color-bg" type="color" e-type="e-border-color">
        </div>
        <div>
            <span>边框-大小:</span>
            <input data-type="text-num" type="text" e-type="e-border-width">
        </div>
        <div>
            <span>圆角度数:</span>
            <input data-type="text-num" type="text" e-type="e-border-radius">
        </div>
        <div>
            <span>上边框</span>
            <input data-type="checkbox" type="checkbox" e-type="e-border-top">
            <span>右边框</span>
            <input data-type="checkbox" type="checkbox" e-type="e-border-right">
            <span>下边框</span>
            <input data-type="checkbox" type="checkbox" e-type="e-border-bottom">
            <span>左边框</span>
            <input data-type="checkbox" type="checkbox" e-type="e-border-left">
        </div>
    </div>
</div>

<!--基础设置面板-->
<div panel-type="basic" class="editor-container ">
    <div class="close btn">X</div>
    <label class="title">基础功能</label>
    <div class="chunk">
        <div class="btn" e-type="e-clone">复制</div>
        <div class="btn" e-type="e-del">删除</div>
        <div class="btn" e-type="e-move-up">上移</div>
        <div class="btn" e-type="e-move-down">下移</div>
    </div>
    <div class="chunk">
        <p>视图显示深度(等级高的优先显示)</p>
        <select e-type="e-z-index">
            <option data-option="auto" selected="selected">auto</option>
            <option data-option="1">1</option>
            <option data-option="2">2</option>
            <option data-option="3">3</option>
            <option data-option="4">4</option>
            <option data-option="5">5</option>
            <option data-option="6">6</option>
            <option data-option="7">7</option>
            <option data-option="8">8</option>
            <option data-option="9">9</option>
        </select>
    </div>
    <div class="chunk">
        <div class="btn" e-type="e-layout-absolute">绝对布局</div>
        <p>绝对布局：以父级左上角为坐标原点，进行位置定位，可以重叠。</p>
        <div class="btn" e-type="e-layout-relative">相对布局</div>
        <p>相对布局：默认的布局模式，从上到下顺序添加元素，无法重叠。</p>
        <div class="btn" e-type="e-layout-fixed-top">固定到顶部</div>
        <div class="btn" e-type="e-layout-fixed-bottom">固定到底部</div>
    </div>
</div>

<!--添加的组件面板-->
<div panel-type="widgets" class="editor-container ">
    <div class="close btn">X</div>
    <label class="title">组件</label>
    <span class="item" create-type="cell" >单元</span>
    <span class="item" create-type="image">图片</span>
    <span class="item" create-type="richtext" >富文本</span>
    <span class="item" create-type="swiper">轮播图</span>
    <span class="item" data-toggle="modal" href="#myModal" id="getTemplate">自定义模板组件</span>
</div>

<!--Material Design Components-->
<div panel-type="md-widgets" class="editor-container ">
    <div class="close btn">X</div>
    <label class="title">Material Design 组件</label>
    <div class="chunk">
        <button create-type="md-button"
                class="item mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"
        >按钮</button>
    </div>
    <div class="chunk">
        <button create-type="md-textfield"
                class="item mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"
        >输入框</button>
    </div>
</div>

<!-- **************** 快捷方式 **************** -->
<div class="shortcut">
    <!--
        for : 用于 mouseover 事件回掉中，判断当前的target 是否需要显示此项
    -->
    <span class="item btn" for="widgets">添加</span>
    <span class="item btn" for="basic">设置</span>
    <span class="item btn" for="style">样式</span>
    <span class="item btn" for="richtext">组件编辑</span>
    <span class="item btn" for="swiper">组件编辑</span>
    <span class="item btn" for="image">组件编辑</span>
    <span class="item btn" for="md-button">风格</span>
    <span class="item btn" for="md-textfield">风格</span>
    <span class="item btn" for="root">主题</span>
    <span class="item btn" condition="copy">粘贴</span>
</div>
<!-- **************** 快捷方式 over **************** -->


<!--************* 模板区   *****************-->
<!--根模板（一般不用到）
    name: 模板名
    features://特性
        selectable : 可选择
        container : 是容器
-->
<template name="root"
          panel="widgets root"
          features="selectable container" >
    <div t-type="root"></div>
</template>
<!--图片编辑面板-->
<div panel-type="root" class="editor-container ">
    <div class="close btn">X</div>
    <label class="title">主题</label>
    <!-- <div class="chunk">
        <div><span>是否全屏</span><input data-type="checkbox" type="checkbox" e-type="e-fullscreen"></div>
    </div> -->
    <div class="chunk" >
        <div><span>适配PC端页面:</span><input data-type="checkbox" type="checkbox" e-type="e-adjust4pc"></div>
    </div>
</div>
<!------------------------------------------------------------------------>

<!--单元
    name: 模板名
    panel: 需要显示的编辑面板名
    features: //特性
        selectable : 可选择
        container : 是容器
-->
<template name="cell"
          panel="widgets basic style"
          features="selectable container" >
    <div t-type="cell" class="cell" style="height: 40px;"></div>
</template>

<!------------------------------------------------------------------------>
<!--图片
-->
<template name="image"
          panel="basic style image"
          features="selectable">
    <div t-type="image" class="cell wrapper height-auto"><img></div>
</template>
<!--图片编辑面板-->
<div panel-type="image" class="editor-container ">
    <div class="close btn">X</div>
    <label class="title">图片</label>
    <div class="chunk">
        <div><span>上传图片</span><input type="file" data-type="file-img" class="file" e-type="e-img"><img style="width:50px;" src=""/></div>
    </div>
</div>
<!------------------------------------------------------------------------>
<!--富文本
    name: 模板名
    panel: 需要显示的编辑面板名
    features: //特性
        selectable : 可选择
-->
<template name="richtext"
          panel="basic style richtext"
          features="selectable" >
    <div t-type="richtext" class="cell" style="min-height: 40px;"></div>
</template>

<!--富文本编辑面板-->
<div panel-type="richtext" class="editor-container " style="min-height: 455px">
    <div class="close btn">X</div>
    <label class="title">富文本</label>
    <div class="chunk">
        <div e-type="e-richtext" style="min-height: 200px"></div>
    </div>
</div>

<!------------------------------------------------------------------------>
<!--轮播图
    name: 模板名
    panel: 需要显示的编辑面板名
    features: //特性
        selectable : 可选择
-->
<template name="swiper"
          panel="basic swiper"
          features="selectable">

    <div t-type="swiper" class="swiper-container cell">
        <div class="swiper-wrapper">
            <!--<div class="swiper-slide active">Slide 1</div>-->
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-index for-editor">0/0</div>
    </div>
</template>

<!--轮播项
    name: 模板名
-->
<template name="swiper-slide">
    <div class="swiper-slide"></div>
</template>

<!--轮播图编辑面板-->
<div panel-type="swiper" class="editor-container ">
    <div class="close btn">X</div>
    <label class="title">轮播图</label>
    <div class="chunk">
        <div class="btn" e-type="e-prev-item">上一页</div>
        <div class="btn" e-type="e-next-item">下一页</div><br><br>
        <div class="btn" e-type="e-add-item-before">向前添加项</div>
        <div class="btn" e-type="e-add-item-after">向后添加项</div>
        <div class="btn" e-type="e-remove-item">删除当前项</div>
    </div>
    <div class="chunk">
        <div><span>设置链接</span><input e-type="e-link" class="w-long" data-type="text" type="text"></div>
        <div><span>添加图</span><input type="file" data-type="file-img-bg" class="file" e-type="e-img-bg"><img style="width:50px;" src=""/></div>
    </div>
    <div class="chunk" >
        <div><span>宽度%: </span><input data-type="text-num" e-type="e-width-p" type="text"></div>

        <div><span>宽度px: </span><input data-type="text-num" e-type="e-width" type="text"></div>

        <p>注意：根据最后变更的类型，判定百分比还是绝对值</p>
    </div>
    <div class="chunk" >
        <div><span>高度%: </span><input data-type="text-num" e-type="e-height-p" type="text"></div>

        <div><span>高度px: </span><input data-type="text-num" e-type="e-height" type="text"></div>

        <p>注意：根据最后变更的类型，判定百分比还是绝对值</p>

    </div>
</div>

<!------------------------------------------------------------------------>

<!--Material Design 组件系列 (Lite 版) -->

<!--MD 按钮-->
<template name="md-button"
          panel="basic style md-button"
          features="selectable">
    <button t-type="md-button" class="mdl-button mdl-js-button cell ">
        <i class="material-icons">add</i>
    </button>
</template>

<!--material 按钮编辑面板-->
<div panel-type="md-button" class="editor-container ">
    <div class="close btn">X</div>
    <!--
        @see https://getmdl.io/components/index.html#buttons-section
    -->
    <label class="title">Material Design 按钮</label>
    <div class="chunk">
        <span>风格</span>
        <!--
            The available button display types are flat (default),
            raised, fab, mini-fab, and icon
        -->
        <select e-type="e-style">
            <option data-option="ignore" selected="selected">ignore</option>
            <option data-option="mdl-button--raised">raised</option>
            <option data-option="mdl-button--fab">fab</option>
            <option data-option="mdl-button--mini-fab">mini-fab</option>
            <option data-option="mdl-button--icon">icon</option>
        </select>
    </div>
    <div class="chunk">
        <span>配色</span>
        <select e-type="e-color">
            <option data-option="ignore" selected="selected">ignore</option>
            <option data-option="mdl-button--colored">colored</option>
            <option data-option="mdl-button--primary">primary</option>
            <option data-option="mdl-button--accent">accent</option>
        </select>
    </div>
    <div class="chunk">
        <span>效果</span>
        <select e-type="e-effect">
            <option data-option="ignore" selected="selected">ignore</option>
            <option data-option="mdl-js-ripple-effect">ripple</option>
        </select>
    </div>
</div>
<!------------------------------------------------------------------------>
<!--TODO-->
<template>
    <div t-type="md-card" class="mdl-card mdl-shadow--2dp cell">
        <div t-type="cell" class="mdl-card__title">
            <h2 class="mdl-card__title-text">Welcome</h2>
        </div>
        <div t-type="cell" class="mdl-card__supporting-text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Mauris sagittis pellentesque lacus eleifend lacinia...
        </div>
        <div class="mdl-card__actions mdl-card--border">
            <a t-type="md-button"  class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                Get Started
            </a>
        </div>
        <div class="mdl-card__menu">
            <button t-type="md-button" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                <i class="material-icons">share</i>
            </button>
        </div>
    </div>
</template>

<!------------------------------------------------------------------------>
<template name="md-textfield"
          panel="basic style md-textfield"
          features="selectable">
    <div t-type="md-textfield" class="mdl-textfield mdl-js-textfield cell">
        <input class="mdl-textfield__input" type="text">
        <label class="mdl-textfield__label">Text...</label>
    </div>
</template>

<!-- md-textfield panel-->
<div panel-type="md-textfield" class="editor-container ">
    <div class="close btn">X</div>
    <!--
        @see https://getmdl.io/components/index.html#textfields-section
    -->
    <label class="title">Material Design 文本</label>
    <div class="chunk">
        <div>
            <div><span>提示</span><input e-type="e-tips" class="w-long" type="text"></div>
        </div>
    </div>
    <div class="chunk">
        <span>风格</span>
        <select e-type="e-style">
            <option data-option="ignore" selected="selected">ignore</option>
            <option data-option="mdl-textfield--floating-label">floating-label</option>
        </select>
    </div>
</div>

<!--************* 模板区  end *****************-->

<!--<span id="import-template">导入模板</span>-->
<!--<span id="save">保存</span>-->
<div id="widgets">
    <button class="btn btn-info" type="button" data-toggle="modal" href="#myModal-1">导出模板</button>
    <button class="btn btn-info" type="button" data-toggle="modal" href="#myModal-2">保存</button>
</div>

<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">导入模板</h4>
            </div>
            <div class="modal-body">
                <div id="Carousel" data-ride="carousel" data-interval="2400" class="carousel slide carousel-fade">
                    <div class="carousel-inner">
                        <volist name="templates" id="temp">
                            <div class="item <if condition='$i eq 1'>active</if>" id="template_{$temp['id']}" data-id="{$temp['id']}">
                                <iframe src="{$temp['link']}" scrolling="yes" height="550" width="400">

                                </iframe>
                                <div style="text-align: center">{$temp['title']}</div>
                            </div>
                        </volist>
                    </div>
                    <notempty name="templates">
                        <div style="text-align: center">
                            <button type="button" class="btn btn-default diy-widgets">选择</button>&nbsp;
                            <button type="button" onclick="deleteTemplate();" class="btn btn-primary">删除</button>
                        </div>
                        <a href="#Carousel" class="left carousel-control" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left"></span>
                        </a>
                        <a href="#Carousel" class="right carousel-control" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right"></span>
                        </a>
                    </notempty>
                </div>
            </div>
        </div>
    </div>
</div>

<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal-1" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">导出模板</h4>
            </div>
            <div class="modal-body">
                <div class="form-inline" role="form">
                    <div class="form-group" style="width:100%">
                        <label class="col-lg-4 col-sm-2 control-label"> 模板名称</label>
                        <div class="col-lg-8">
                            <input class="form-control" id="template_title" value="">
                        </div>
                    </div>
                    <button type="submit" id="export-template" class="btn btn-primary">提交</button>
                </div>

            </div>

        </div>
    </div>
</div>

<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal-2" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">页面标题</h4>
            </div>
            <div class="modal-body">
                <div class="form-inline" role="form">
                    <div class="form-group" style="width:100%">
                        <label class="col-lg-4 col-sm-2 control-label"> 页面标题</label>
                        <div class="col-lg-8">
                            <input class="form-control" id="page_title" value="{$editor['title']}">
                        </div>
                    </div>
                    <button type="submit" id="save" class="btn btn-primary">保存</button>
                </div>

            </div>

        </div>
    </div>
</div>